<!-- 连接通知 -->
<template>
  <div class="mt-5" >
    <div class="row">
      <h5 class="mb-4">Notifications</h5>
      <div class="mb-4 col-lg-4 col-md-6">
        <!-- TG -->
        <div class="card">
          <div class="p-3 card-body">
            <div class="d-flex align-items-center">
              <div class="p-2 avatar avatar-lg border-radius-md">
                <img
                  :src="require('@/assets/img/telegramImg.png')"
                  alt="telegram"
                />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">telegram</h6>
              </div>
              <div class="ms-auto">
                <div class="form-check form-switch p-0 m-0">
                  <input
                    id="flexSwitchCheckHumidity"
                    class="form-check-input"
                    style="height: 1.25rem"
                    type="checkbox"
                    :checked="account.tg_notify == 1 ? true : false"
                    :disabled="account.nickname ? false : true"
                    @click="switchNotifications('telegram')"
                  />
                </div>
              </div>
            </div>
            <p class="mt-4 text-sm" style="height: 43px">
              {{
                account.group_id != 0
                  ? `Current Account: ${account.nickname}`
                  : "Please activate your channels to receive notifications of our Signal Price alert."
              }}
            </p>
            <hr class="horizontal dark" />
            <div v-loading.fullscreen="loading" class="">
              <soft-button
                v-if="account.group_id == 0"
                class="text-capitalize py-2"
                variant="gradient"
                color="info"
                @click="bindHandle('telegram')"
                >Link
              </soft-button>
              <soft-button
                v-else
                class="text-capitalize py-2"
                variant="gradient"
                color="secondary"
                @click="unbindHandle('telegram')"
                >Unlink
              </soft-button>
            </div>
          </div>
        </div>
      </div>
      <!-- Webhooks -->
      <div class="mb-4 col-lg-4 col-md-6">
        <div class="card">
          <div class="p-3 card-body">
            <div class="d-flex align-items-center">
              <div class="p-2 avatar avatar-lg border-radius-md">
                <img
                  :src="require('@/assets/img/webhooksImg.png')"
                  alt="webhooks"
                />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Webhooks</h6>
              </div>
              <div class="ms-auto">
                <div class="form-check form-switch p-0 m-0">
                  <input
                    class="form-check-input"
                    style="height: 1.25rem"
                    type="checkbox"
                    :checked="account.notify == 1 ? true : false"
                    disabled
                  />
                </div>
              </div>
            </div>
            <p class="mt-4 text-sm" style="height: 43px">
              Please activate your channels to receive notifications of our
              Signal Price alert.
            </p>
            <hr class="horizontal dark" />
            <div class="">
              <soft-button
                class="text-capitalize py-2"
                variant="outline"
                color="secondary"
                @click="bindHandle"
                >Inactive
              </soft-button>
            </div>
          </div>
        </div>
      </div>

      <!-- Notifications -->
      <div class="mb-4 col-lg-4 col-md-6">
        <div class="card">
          <div class="p-3 card-body">
            <div class="d-flex align-items-center">
              <div
                class="p-2 avatar avatar-lg"
                style="border-radius: 50%; background-color: #f8f9ff"
              >
                <i class="fa fa-bell text-2xl iconBgColor"></i>
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Notifications</h6>
              </div>
              <div class="ms-auto">
                <div class="form-check form-switch p-0 m-0">
                  <input
                    id="test2"
                    class="form-check-input"
                    style="height: 1.25rem"
                    type="checkbox"
                    :checked="account.notify == 1 ? true : false"
                  />
                </div>
              </div>
            </div>
            <p class="mt-4 text-sm" style="height: 43px">
              Current Account: {{ account.email }}
            </p>
            <hr class="horizontal dark" />
            <div class="">
              <soft-button
                style="visibility: hidden"
                class="text-capitalize py-2"
                variant="outline"
                color="secondary"
                >Inactive
              </soft-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4">
      <h5 class="mb-4">Connect Wallet</h5>
      <div class="col-lg-4 col-md-6">
        <!-- Metamask -->
        <div class="card">
          <div class="p-3 card-body">
            <div class="d-flex align-items-center">
              <div class="p-2 avatar avatar-lg border-radius-md">
                <img
                  :src="require('@/assets/img/MetaMaskImg.png')"
                  alt="Metamask"
                />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Metamask</h6>
              </div>
              <div class="ms-auto">
                <div class="form-check form-switch p-0 m-0">
                  <input
                    id="test3"
                    class="form-check-input"
                    style="height: 1.25rem"
                    type="checkbox"
                    :checked="false"
                    :disabled="account.address ? false : true"
                  />
                </div>
              </div>
            </div>
            <p class="mt-4 text-sm" style="height: 43px">
              {{
                account.address
                  ? `Current Account: ${account.nickname}`
                  : "Log in Tradingsignal.ai by connecting your Metamask Wallet."
              }}
            </p>
            <hr class="horizontal dark" />
            <div class="">
              <soft-button
                v-if="account.address"
                class="text-capitalize py-2"
                variant="outline"
                color="secondary"
                @click="bindHandle"
                >Connected
              </soft-button>
              <soft-button
                v-else
                class="text-capitalize py-2"
                variant="gradient"
                color="info"
                @click="unbindHandle"
                >Connect
              </soft-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SoftButton from "@/components/SoftButton.vue";
import { bindTelegram, switchNotify, unbindTelegram } from "@/request/api.js";
export default {
  components: {
    SoftButton,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    ...mapState("app", ["account"]),
    dataList() {
      return [
        {
          title: "Telegram",
          bindText: `Current Account: ${this.account.nickname}`,
          noBind:
            "Please activate your channels to receive notifications of our Signal Price alert.",
          image: require("@/assets/icon/telegramIcon_bind.png"),
          disabled: this.account.nickname ? false : true,
          linkBtn: "Link",
        },
        {
          title: "Webhooks",
          noBind:
            "Please activate your channels to receive notifications of our Signal Price alert.",
          image: require("@/assets/icon/telegramIcon_bind.png"),
          disabled: this.account.nickname ? false : true,
          linkBtn: "Link",
        },
      ];
    },
  },
  methods: {
    // 通知切换
    async switchNotifications(type) {
      if (type === "telegram") {
        let params = {
          type: "tg_notify",
          status: this.account.tg_notify == 0 ? "1" : "0",
        };
        this.loading = true;
        let res = await switchNotify(params);
        this.loading = false;
        if (res.code == 200) {
          this.$store.dispatch("app/setAccount");
        }
      }
    },
    // 解除绑定
    async unbindHandle(type) {
      if (type === "telegram") {
        this.loading = true;
        let res = await unbindTelegram();
        this.loading = false;
        if (res.code == 200) {
          this.$store.dispatch("app/setAccount");
        }
      }
    },

    //绑定
    async bindHandle(type) {
      if (type === "telegram") {
        let url = this.account.telegram_url;
        window.open(url, "_blank");
        this.loading = true;

        let res = await bindTelegram();
        this.loading = false;

        if (res.code == 200) {
          this.$store.dispatch("app/setAccount");
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.iconBgColor {
  background: linear-gradient(135deg, #21d4fd 0%, #2152ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>
